<template>
  <div class="header">访问地区</div>
  <div class="map">
    <div ref="chart" class="echarts"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, watch } from 'vue'
import * as echarts from 'echarts';
// 移除百度地图引入
// import 'echarts/extension/bmap/bmap'
import mapEchartData from './mapEchartData.json'

const { list } = defineProps(['list'])
const chart = ref(null)
let myChart = null

// 注册中国地图
const registerChinaMap = () => {
  echarts.registerMap('china', {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {"name": "北京"},
        "geometry": {"type": "Point", "coordinates": [116.4, 39.9]}
      },
      {
        "type": "Feature", 
        "properties": {"name": "上海"},
        "geometry": {"type": "Point", "coordinates": [121.47, 31.23]}
      },
      {
        "type": "Feature",
        "properties": {"name": "广州"},
        "geometry": {"type": "Point", "coordinates": [113.23, 23.16]}
      },
      {
        "type": "Feature",
        "properties": {"name": "深圳"},
        "geometry": {"type": "Point", "coordinates": [114.07, 22.62]}
      },
      {
        "type": "Feature",
        "properties": {"name": "杭州"},
        "geometry": {"type": "Point", "coordinates": [120.19, 30.26]}
      },
      {
        "type": "Feature",
        "properties": {"name": "成都"},
        "geometry": {"type": "Point", "coordinates": [104.06, 30.67]}
      },
      {
        "type": "Feature",
        "properties": {"name": "武汉"},
        "geometry": {"type": "Point", "coordinates": [114.31, 30.52]}
      },
      {
        "type": "Feature",
        "properties": {"name": "西安"},
        "geometry": {"type": "Point", "coordinates": [108.95, 34.27]}
      },
      {
        "type": "Feature",
        "properties": {"name": "南京"},
        "geometry": {"type": "Point", "coordinates": [118.78, 32.04]}
      },
      {
        "type": "Feature",
        "properties": {"name": "重庆"},
        "geometry": {"type": "Point", "coordinates": [106.54, 29.59]}
      },
      {
        "type": "Feature",
        "properties": {"name": "天津"},
        "geometry": {"type": "Point", "coordinates": [117.2, 39.13]}
      },
      {
        "type": "Feature",
        "properties": {"name": "苏州"},
        "geometry": {"type": "Point", "coordinates": [120.62, 31.32]}
      },
      {
        "type": "Feature",
        "properties": {"name": "郑州"},
        "geometry": {"type": "Point", "coordinates": [113.65, 34.76]}
      },
      {
        "type": "Feature",
        "properties": {"name": "长沙"},
        "geometry": {"type": "Point", "coordinates": [113.0, 28.21]}
      },
      {
        "type": "Feature",
        "properties": {"name": "沈阳"},
        "geometry": {"type": "Point", "coordinates": [123.38, 41.8]}
      },
      {
        "type": "Feature",
        "properties": {"name": "青岛"},
        "geometry": {"type": "Point", "coordinates": [120.33, 36.07]}
      },
      {
        "type": "Feature",
        "properties": {"name": "大连"},
        "geometry": {"type": "Point", "coordinates": [121.62, 38.92]}
      },
      {
        "type": "Feature",
        "properties": {"name": "厦门"},
        "geometry": {"type": "Point", "coordinates": [118.1, 24.46]}
      },
      {
        "type": "Feature",
        "properties": {"name": "宁波"},
        "geometry": {"type": "Point", "coordinates": [121.56, 29.86]}
      },
      {
        "type": "Feature",
        "properties": {"name": "无锡"},
        "geometry": {"type": "Point", "coordinates": [120.29, 31.59]}
      }
    ]
  });
}

const convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = mapEchartData[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
};

const initChart = () => {
  if (!chart.value) return;
  
  myChart = echarts.init(chart.value);
  registerChinaMap();
  updateChart();
}

const updateChart = () => {
  if (!myChart) return;
  
  const data = list || [];
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '全国城市用户访问分布',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.componentType === 'series') {
          return params.name + ' : ' + (params.value[2] || params.value);
        }
        return params.name;
      }
    },
    // 修改这里：使用 geo 替代 bmap
    geo: {
      map: 'china',
      roam: true,
      center: [104.114129, 37.550339], // 调整中心点
      zoom: 4,
      label: {
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        areaColor: '#004981',
        borderColor: '#064f85',
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          areaColor: '#005b96'
        },
        label: {
          show: false
        }
      }
    },
    series: [
      {
        name: '访问量',
        type: 'scatter',
        coordinateSystem: 'geo', // 修改这里：使用 geo 坐标系
        data: convertData(data),
        encode: {
          value: 2
        },
        symbolSize: function (val) {
          return Math.max(val[2] / 3, 5);
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: true
        },
        itemStyle: {
          color: '#f4e925'
        },
        emphasis: {
          label: {
            show: true
          }
        }
      },
      {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'geo', // 修改这里：使用 geo 坐标系
        data: convertData(
          data
            .sort(function (a, b) {
              return b.value - a.value;
            })
            .slice(0, 5)
        ),
        encode: {
          value: 2
        },
        symbolSize: function (val) {
          return Math.max(val[2] / 3, 8);
        },
        showEffectOn: 'emphasis',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
          formatter: '{b}',
          position: 'right',
          show: true
        },
        itemStyle: {
          color: '#f4e925',
          shadowBlur: 10,
          shadowColor: '#333'
        },
        zlevel: 1
      }
    ]
  };
  
  myChart.setOption(option);
}

// 监听数据变化
watch(() => list, () => {
  updateChart();
}, { deep: true });

onMounted(() => {
  initChart();
})

// 组件卸载时销毁图表
import { onUnmounted } from 'vue';
onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
})
</script>

<style lang='less' scoped>
.echarts {
  width: 800px;
  height: 600px;
}

.header {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  border-bottom: 1px solid #f0f0f0;
}

.map {
  display: flex;
  justify-content: space-between;
}
</style>